<template>
	<div>
		<el-form class="query-form" :model="query_params">
			<el-row>
		    <el-col class="query-item" :span="6">
					<el-form-item label="订单ID/订单号" prop="name">
						<el-input v-model="query_params.order_sn"  autocomplete="off" />
					</el-form-item>
				</el-col>
				<el-col class="query-item" :span="6">
					<el-form-item >
						<el-button type="primary" @click="search">搜索</el-button>
					</el-form-item>
				</el-col>

		  </el-row>
		</el-form>
		<!-- <el-row class="add-box-css"><el-button type="primary" @click="activity_operation">新增</el-button></el-row> -->
		<el-table :data="tableData" border style="width: 100%">
		    <el-table-column label="序号" width="180" >
				<template #default="scope">
		            {{scope.$index+1}}
		        </template>
		    </el-table-column>
		    <el-table-column prop="name" label="商品" width="180" />
		    <el-table-column prop="desc" label="订单备注" />
		    <el-table-column prop="pricing" label="原价" />
				<el-table-column prop="price" label="现价" />
				<el-table-column prop="createdAt" label="下单时间" />
				<el-table-column prop="status" label="状态" >
					<template #default="scope">
							{{getStatus(scope.row)}}
					</template>
				</el-table-column>
				<!-- <el-table-column  label="操作" >
		    	<template #default="scope">
		    		<el-button type="primary" size="small" @click="activity_operation(scope.row)">编辑</el-button>
		      </template>
				</el-table-column> -->
		</el-table>
		<div class="pagination_box">
			<el-pagination background layout="prev, pager, next"  :total="total" @current-change="handleCurrentChange" />
		</div>
	</div>
</template>
<script type="text/javascript">
	import {  ElMessageBox ,ElMessage} from 'element-plus'
	export default {
		data(){
			return {
				queryForm:{},
				query_params:{
					current:1,
					size:10
				},
				tableData:[],
				total:0,
				drawer:false,
				// 表单
				ruleFormRef:{},
				ruleForm :{
				},
				rules:{
				  name: [
				    { required: true, message: '请输入商户', trigger: 'blur' },
				  ],
				},
			}
		},
		methods:{
			search(){
				//console.log(this.queryForm);
				this.query_params.current=1;
				this.query_params.size=10;
				this.getList()
			},
			activity_operation(row){
				this.drawer=true
				if(row){//编辑

				}
				else{//新增

				}
			},
			getStatus(row){//查询状态
				// console.log(row);
				var str="正常"
				if(row.status=='-1'){
					str="已退单"
				}
				return str
			},
			confirm(row){//确认身份
				console.log(row)
				this.$API.confirmRole({
					id:row.id
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						ElMessage({
						    message: '操作成功',
						    type: 'success',
						 })
					}
					else{
						ElMessage({
						    message: '操作失败',
						    type: 'warning',
						})
					}
				}).catch(error=>{
					ElMessage({
						    message: '操作失败',
						    type: 'error',
						 })
				})
			},
			handleCurrentChange(val){
				console.log(val)
				this.query_params.current=val;
				this.getList();
			},
			getList(){
				this.$API.getOrderList(this.query_params).then(res=>{
					console.log(res)
					if(res.code==200){
						this.tableData=res.data;
						if(this.total<1){
							this.total=res.total
						}
					}
				})
			},
			uploadAction(file){//文件上传
				file.status = 'uploading';
	            file.message = '上传中...';
	            //开始上传
	            const content = new FormData();
	            //上传图片需要转换二进制这里要用到FormData
	            content.append("file", file.file);
	            //"file"是后端接口需要传的属性的名字
	            this.$API.upload(content).then(res => {
	                // console.log(res)
	                file.status = 'done';
	                file.message = '上传成功';
	                file.url = res.data;
	                //重新赋值  规格/门头照/logo/视频
	                if(this.list_type=='normsList'){//规格
	                	for(let item of this.normsList[this.current_norms].fileList){
		                	if(item.raw.uid==file.file.uid){
		                		item.url=file.url
		                	}
		                }
	                }
	                else{
	                	for(let item of this[this.list_type]){
		                	if(item.raw.uid==file.file.uid){
		                		item.url=file.url
		                	}
		                }
	                }
	                // console.log(this.normsList)
	            }).catch(error => {
	                // console.log(error);
	                file.status = 'failed';
	                file.message = '上传失败';
	            })
			},
			handleChange(i,type){
				this.list_type=type
				if(type=='normsList'){
					this.current_norms=i
				}
			},
			handlePictureCardPreview(uploadFile){//预览文件
				this.dialogImageUrl=uploadFile.url
				this.dialogVisible=true
			},
			handleRemove(uploadFile, uploadFiles){

			},
			//视频上传
			handleDownload(file){//下载视频
				// console.log(file)
				// location.href=file.url
				window.open(file.url,'_blank');
			},
			//视频切片上传
			async uploadAction_video(file){
				// console.log(file)
				try {
			        // 判断扩展名
			        const tmpcnt = file.file.name.lastIndexOf('.')
			        const exname = file.file.name.substring(tmpcnt + 1)
			        const client = clients()
			        const names = ['wav', 'mp4']
			        if (names.indexOf(exname) < 0) {
			          this.$message.error('不支持的格式!')
			          return
			        }
			        this.loading = true
			        // const imgUrl = 'http://work.hezonglianmeng.com'
			        const imgUrl = 'https://workflow-zym.oss-cn-shanghai.aliyuncs.com'
			        const fileName = `static/uploadfile/${getNowDate()}/${
			          file.file.uid
			        }.${exname}`
			        // 依次填写Object完整路径（例如exampledir/exampleobject.txt）和本地文件的完整路径（例如D:\\localpath\\examplefile.txt）。Object完整路径中不能包含Bucket名称。
			        // 如果本地文件的完整路径中未指定本地路径（例如examplefile.txt），则默认从示例程序所属项目对应本地路径中上传文件。
			        await client.multipartUpload(fileName, file.file, {
			          progress: (p, cpt, res) => {
			            // 获取分片上传进度、断点和返回值。
			            this.percentage = (Math.floor(p * 100) / 100) * 100
			            if (p === 1) {
			              this.loading = false
			            }
			          },
			          parallel: 5, // 并发上传的分片数量
			          partSize: 1024 * 1024 * 20,
			          // headers,
			          // 指定meta参数，自定义Object的元信息。通过head接口可以获取到Object的meta数据。
			          meta: {
			            year: 2020,
			            people: 'test'
			          },
			          mime: file.type // 上传文件类型
			        })
			        // 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
			        const head = await client.head(fileName)
			        if (head.status === 200) {
			        	console.log(`${imgUrl}/${fileName}`)
			        	//赋值到相应的store_video上
			        	for(let item of this.store_video){
			        		if(item.uid==file.file.uid){
			        			item.url=`${imgUrl}/${fileName}`
			        		}
			        	}
			          // this.$set(this.courseForm, 'audition_link', `${imgUrl}/${fileName}`)
			          // this.$set(this.courseForm, 'audition_course_name', file.file.name)
			        }
			        else{
			        	console.log(`${imgUrl}/${fileName}`)
			        }
		        } catch (e) {
			        if (e.code === 'ConnectionTimeoutError') {
			          console.log('TimeoutError')
			        }
		       }
			},
		},
		mounted(){
			this.getList();
		}
	}
</script>
<style type="text/css">
	.pagination_box{
		    text-align: center;
		    display: flex;
		    justify-content: center;
		    width: 100%;
	}
	.query-item{
		margin-right:10px
	}
	.query-form{
		    padding:20px;
				    padding-bottom: 0px;
	}
	.add-box-css{
		width:100%;
		align-items: end;
    justify-content: end;
    padding: 0px 1rem 1rem 0px;
	}
</style>
